<template>
	<view class="order-data-main">
		<div id="order-data-total-view">
			<div>
				<p class="order-data-total-title">累计销售额(元)</p>
				<p id="total-money">500000</p>
			</div>
			<div id="center-line">

			</div>
			<div>
				<p class="order-data-total-title" style="margin-right: 40rpx;margin-left: 0;">累计销售额(元)</p>
				<p id="total-user">6</p>
			</div>
		</div>

		<div class="white-card-bg">
			<div>
				<p class="title-text" style="margin-left: 40rpx;">支付订单(笔)</p>
				<p class="content-text" style="margin-left: 40rpx;">0</p>
			</div>
			<div>
				<p class="title-text">支付金额(元)</p>
				<p class="content-text">0.00</p>
			</div>
			<div>
				<p class="title-text" style="margin-right: 84rpx;">支付人数</p>
				<p class="content-text" style="margin-right: 84rpx;">0</p>
			</div>
		</div>

		<div class="white-card-bg">
			<div>
				<p class="title-text" style="margin-left: 40rpx;">待发货订单</p>
				<p class="content-text" style="margin-left: 40rpx;">0</p>
			</div>
			<div>
				<p class="title-text">售后维权</p>
				<p class="content-text">0</p>
			</div>
			<div>
				<p class="title-text" style="margin-right: 84rpx;">退款订单</p>
				<p class="content-text" style="margin-right: 84rpx;">0</p>
			</div>
		</div>

		<div class="white-card-bg">
			<div>
				<p class="title-text" style="margin-left: 40rpx;">支付金额(元)</p>
				<p class="content-text" style="margin-left: 40rpx;">0</p>
			</div>
			<div>
				<p class="title-text">支付人数(人)</p>
				<p class="content-text">0.00</p>
			</div>
			<div>
				<p class="title-text" style="margin-right: 84rpx;">注册人数</p>
				<p class="content-text" style="margin-right: 84rpx;">0</p>
			</div>
		</div>

		<div style="display: flex;justify-content: center;margin-top: 50rpx;">
			<div style="display: flex;align-items: center;">
				<div class="data-update-time-line"></div>
				<span id="data-update-time">数据更新时间 2023-11-21 10:43:07</span>
				<div class="data-update-time-line"></div>
			</div>
		</div>


	</view>
</template>

<script>
</script>

<style>
	.order-data-main {
		background-color: #FAFAFA;
		width: 100%;
		height: 100%;
	}

	#order-data-total-view {
		display: flex;
		background-color: #5C1D63;
		padding-top: 40rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 40rpx;
		border-radius: 20rpx;
		align-items: center;
		justify-content: space-between;
	}

	.order-data-total-title {
		font-size: 24rpx;
		color: #fff;
		opacity: 0.5;
		margin-left: 40rpx;
	}

	#total-money {
		color: white;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: bold;
		font-size: 32rpx;
		margin-top: 8rpx;
		margin-left: 40rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		text-align: left;
		font-style: normal;
	}

	#total-user {
		color: white;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: bold;
		font-size: 32rpx;
		margin-top: 8rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		text-align: left;
		font-style: normal;
	}

	#center-line {
		width: 2rpx;
		height: 98rpx;
		border: 1rpx solid;
		opacity: 0.4;
		border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
	}

	.white-card-bg {
		display: flex;
		background-color: white;
		padding-top: 40rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 40rpx;
		border-radius: 20rpx;
		align-items: center;
		justify-content: space-between;
	}

	.title-text {

		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		opacity: 0.5;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.content-text {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: bold;
		font-size: 32rpx;
		color: #FF2928;
		margin-top: 8rpx;
		line-height: 46rpx;
		text-align: left;
		font-style: normal;
	}

	.data-update-time-line {
		width: 52rpx;
		height: 2rpx;
		border: 1rpx solid #979797;
		opacity: 0.5;
	}

	#data-update-time {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 24rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
		color: #000000;
		opacity: 0.2;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}
</style>